<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册</title>
		<meta name = "viewport" content = "width = device-width, initial-scale = 1.0,
			 maximum-scale = 1.0, user-scalable = 0" />
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/style.css" />
		
	</head>
	<body>
		<div id="forgetPass">
			<div class="return">
				<strong @click="back"> < </strong>
				<span>注册</span>
			</div>
			<div class="findPass">
				<input type="text" placeholder="请输入手机号码" v-model="phoneNum" maxlength="11"/>
				<div class="code">
					<input type="text" placeholder="请输入验证码" v-model="code" maxlength="8"/>
					<span @click="getCodes" v-show="show">{{getCode}}</span>
					<span @click="getCodes" v-show="!show">{{count}}s重新发送</span>
				</div>
				<div class="code">
					<input type="text" placeholder="请输入图片验证码" maxlength="6"/>
					<img v-bind:src="imgUrl" @click="getImg"/>
				</div>
				<input type="password" placeholder="设置6-20位数字字母组合密码" v-model="passWord" maxlength="21"/>
				<button @click="registers">注册</button>
				<p class="service">注册即同意<a href="registerAgreement.html">《软件注册服务协议》</a></p>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/rem.js" ></script>
	<script type="text/javascript" src="../js/vue.js" ></script>
	<script type="text/javascript" src="../js/mint2.2.13.js" ></script>
	<script type="text/javascript" src="../js/axios.min.js" ></script>
	<script type="text/javascript">
		new Vue({
			el:"#forgetPass",
			data:{
				getCode:"获取验证码",
				phoneNum:"",
				passWord:"",
				code:"",
				count:60,
				timer:null,
				show:true,
				imgUrl:"../images/star.png"
			},
			created(){
				//初次加载获取图片验证码
//				axios.get("").then(function(response){
//					console.log(response.data);
//				});
			},
			methods:{
				back(){
					window.location.href="login.html";
				},
				//获取验证码
				getCodes(){
					//获取验证码
//					axios.get("",{
//						params:{
//							phone:this.phoneNum
//						}
//					}).then(function(response){
//						
//					});
					var phoneNum=this.phoneNum.replace(/\s/g,'');
					const regPhone=/^1[0-9]{10}$/;
					if(phoneNum === ""){
						this.$toast({
						  message: '手机号不能为空',
						  position: 'center',
						  duration: 1500
						});
						return;
					}else if(regPhone.test(phoneNum) == false){
						this.$toast({
						  message: '手机号码格式不正确',
						  position: 'center',
						  duration: 1500
						});
						return;
					}
					const TIME_COUNT = 60;
				     if (!this.timer) {
				       this.count = TIME_COUNT;
				       this.show = false;
				       this.timer = setInterval(() => {
				       if (this.count > 0 && this.count <= TIME_COUNT) {
				         this.count--;
				        } else {
				         this.show = true;
				         clearInterval(this.timer);
				         this.timer = null;
				         this.getCode="再次发送";
				        }
				       }, 1000)
				      }
				},
				//点击切换图片验证码
				getImg(){
					
				},
				//注册
				registers(){
					//验证是否在其他平台注册
//					axios.get("",{
//						params:{
//							phone:this.phoneNum
//						}
//					}).then((response) => {
//						this.$messagebox({
//							title: '提示',
//						    message: '您手机号码已在我司其他平台注册过，请您直接登录',
//						    showCancelButton: true
//						});
//					});
					
					var passWord=this.passWord.replace(/\s/g,'');
					const regPass=/^[a-zA-Z0-9]{6,20}$/;
					if(passWord === ""){
						this.$toast({
						  message: '密码不能为空',
						  position: 'center',
						  duration: 1500
						});
						return;
					}else if(regPass.test(passWord) == false){
						this.$toast({
						  message: '请输入6-20位数字字母组合密码',
						  position: 'center',
						  duration: 1500
						});
						return;
					}
					//验证短信验证码
					
					//验证图片验证码
					
					
//					axios.post("",{
//						params:{
//							phone:phoneNum,
//							code:code,
//							password:passWord
//						}
//					}).then(function(response){
//						
//					});
					
				}
			}
		})
	</script>
	
</html>
